<template>
  <div>
    <div class="chapter-video">
      <!--:poster="chapterInfo.cover"-->
      <video
        v-if="videoUrl"
        x5-video-player-type="h5"
        webkit-playsinline="true"
        playsinline="true"
        x5-playsinline="true"
        x-webkit-airplay="true"
        x5-video-ignore-metadata="true"
        :poster="chapterInfo.cover"
        @ended="timeupdate"
        @play="videoTimeData"
        Controls 
        :src="videoUrl"
        ref="myVideo"
        id="myVideo"
        width="100%"
        height="175px"
      >
        <source :src="videoUrl" type="video/mp4" />
        <source :src="videoUrl" type="video/ogv">
      </video>
      <van-empty description="暂无视频"  v-else/>
      <div class="explain">
        <h3 class="line-clamp-2">{{chapterInfo.name}}</h3>
        <div class="details flex-j-sb flex-a-c">
          <span class="browse">浏览 {{chapterInfo.views}}</span>
          <div class="flex-a-c details-right" @click="backClick">
            <span>课程详情</span>
            <span class="iconfont icon-advertise-next"></span>
          </div>
        </div>
      </div>
    </div>
    <!--目录-->
    <div class="chapter-list">
      <div class="title flex-j-sb">
        <div>目录</div>
        <div>共{{chapterCount}}章，{{sectionCount}}小节</div>
      </div>
      <div class="chapter-content" :style="iPnoneBottomBol ? 'padding-bottom: 34px;' : ''">
        <van-collapse v-model="activeNames"  :border="false" v-if="chapterData.length > 0">
          <block v-for="(item,index) in chapterData" :key="index">
            <van-collapse-item :name="item.id" :border="true">
              <template #title>
                <div class="flex-a-c">
                  <h3>{{item.name}}</h3>
                </div>
              </template> 
               <block v-for="(sectionItem,sectionIndex) in item.section" :key="sectionIndex" class="chapter-item">
                <div class="flex-a-c content" @click.stop="sectionOn(sectionItem,sectionIndex,index)">
                  <div class="flex-a-c flex-j-sb sel-title">
                    <h3 class="line-clamp-1" :class="subchapterIndex === sectionIndex && chapterIndex === index?'on':''">{{sectionItem.name}}</h3>
                    <span class="iconfont icon-course_lock" v-if="courseStatus === 1"></span>
                    <div class="try-and" v-else-if="sectionItem.can_try && courseStatus === 0">试看</div>
                    <span class="iconfont icon-course_unlock" v-else></span>
                  </div>
                  
                  <div class="examine flex-a-c flex-j-sb">
                    <div class="time flex-a-c">
                      <span class="iconfont icon-course_time" v-if="sectionItem.try_time !== 0 || sectionItem.video_second !== 0"></span>
                      <span v-if="courseStatus !== 0">{{videoSecondTime(sectionItem.video_second)}}</span>
                      <span v-else-if="courseStatus == 0 && !sectionItem.can_try">{{videoSecondTime(sectionItem.video_second)}}</span>
                      <span v-else>{{videoSecondTime(sectionItem.try_time)}}</span>
                    </div>
                    
                  </div>
                </div>
              </block>
            </van-collapse-item>
          </block>
        </van-collapse>
        <van-empty description="暂无数据"  v-else/>
        <p class="upload" v-if="page < total_page">下拉加载更多</p>
        <p class="upload" v-if="chapterData.length > 0">加载完毕</p>
      </div>
    </div>
    <van-notice-bar 
      mode="closeable" 
      v-if="chapterInfo.time_limit && courseStatus === 0 && chapterInfo.sale_mode === 2"
      :style="iPnoneBottomBol ? 'bottom: 34px;' : ''">
      <div >课程有效期：购买后{{chapterInfo.time_limit}}天有效</div>
    </van-notice-bar>
    <van-notice-bar 
      mode="closeable" 
      v-if="courseStatus === 0 && chapterInfo.sale_mode === 1"
      :style="iPnoneBottomBol ? 'bottom: 34px;' : ''">
      <div >课程有效期：购买后永久有效</div>
    </van-notice-bar>
    <van-notice-bar 
      mode="closeable" 
      v-if="courseStatus === 1 && chapterInfo.sale_mode === 2"
      :style="iPnoneBottomBol ? 'bottom: 34px;' : ''">
      <div>有效期：{{deadline}}到期</div>
    </van-notice-bar>

    <van-popup v-model="videoShow" closeable :style="{ borderRadius: '16px' ,width:'80%'}" >
      <div class="video-main">
        <h3>购买后继续观看</h3>

        <div class="content flex">
          <div class="img"><img :src="chapterInfo.cover" /></div>
          <div class="right">
            <p class="ell">{{chapterInfo.name}}</p>
            <p class="price">{{chapterInfo.price}}</p>
          </div>
        </div>
        <div class="video-back gray"  v-if="pluginSetting && pluginSetting.yz_course_supply && pluginSetting.yz_course_supply.is_ios_sell == 1" >立即购买</div>
        <div class="video-back" @click="videoPlay" v-else>立即购买</div>
        
      </div>
    </van-popup>
  </div>
</template>
<script>
import chapterList_controller from "./chapterList_controller.js";
export default chapterList_controller;
</script>
<style scoped>
#appMain.pcStyle .van-popup {
  left: 50%;
}

.chapter-content ::v-deep .van-cell {
  padding: 1rem 0.625rem;
  background: #F6F6F6;
  border-radius: 8px 8px 8px 8px;
  margin:10px 0;
}


.chapter-content ::v-deep .van-collapse-item__content {
  /* background: #f6fafd; */
  padding: 0;
}

.chapter-video ::v-deep video {
  width: 100%;
  height: 12.625rem;

  /* height:auto; */
}

#appMain.pcStyle .van-notice-bar {
  width: 23.4375rem;
}

.van-notice-bar {
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 10;
  color: #ff7a0e;
  font-size: 0.75rem;
  height: 1.5rem;
  background-color: rgba(255, 123, 15, 0.2);
}

.chapter-list .chapter-content .chapter-item:last-child .content {
  border-bottom: none;
}

.ell {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

  /* 定义显示的行数 */
  overflow: hidden;
}
</style>
<style lang="scss" scoped>
  .chapter-video {
    background-color: #fff;

    .explain {
      padding: 1.125rem;

      h3 {
        font-size: 1rem;
        font-weight: bold;
        color: #151515;
        line-height: 1.4375rem;
        text-align: left;
      }

      .details {
        padding: 1.375rem 0 0 0;

        .browse {
          font-size: 0.875rem;
          font-weight: 500;
          color: #8a8c92;
        }

        .details-right {
          color: #2a74c1;
          font-size: 0.875rem;
        }
      }
    }
  }

  .chapter-list {
    background: #fff;
    border-radius: 0.625rem;
    margin: 0.8125rem 0 0 0;

    .title {
      border-bottom: 0.0625rem solid #f5f6fa;
      padding: 1.25rem 1.75rem 1rem 1.875rem;
    }

    .chapter-content {
      padding: 1rem 1.125rem 2.5rem 1.125rem;

      h3 {
        font-size: 0.9375rem;
        color: #202020;
        padding: 0 0 0 0.6875rem;
      }

      .on {
        color: #fd453f !important;
      }

      .content {
        flex-direction: column;
        padding: 0.3125rem 0.625rem;
        // padding-bottom: 1.25rem;
        border-bottom: 0.0625rem solid #e7eef6;
        .sel-title {
          width:100%;
          .try-and {
            font-size:12px;
            line-height: 12px;
            font-weight: 500;
            border-radius: 0.3125rem;
            color: #ff3101;
            padding: 0.1875rem 0.3125rem;
            background-color: rgba(255, 49, 1, 0.1);
          }
        }
        h3 {
          width: 80%;
          padding: 0;
          text-align: left;
          font-weight: 500;
          font-size: 13px;
          color: #161616;
        }
        .examine {
          width: 100%;
          padding: 0.25rem 0 0.3125rem 0;

          .time {
            color: #989898;
            font-size: 12px;

            .icon-course_time {
              padding-right: 0.5rem;
            }
          }

          
        }
      }
    }
  }

  .video-main {
    padding: 18px 20px 30px 20px;

    h3 {
      line-height: 1.125rem;
      font-size: 1.125rem;
      font-weight: bold;
      color: #000;
      padding-bottom: 2.375rem;
    }

    .content {
      padding-bottom: 1.6875rem;

      .img {
        // width:60%;
        img {
          width: 120px;
          height: auto;
          display: block;
        }
      }

      .right {
        padding: 0 0 0 10px;

        p {
          text-align: left;
          font-size: 16px;
        }

        .price {
          padding: 10px 0 0 0;
          font-size: 1.125rem;
          font-weight: 800;
          color: #fd453f;
          text-align: left;
        }
      }
    }

    .video-back {
      font-size: 1.125rem;
      line-height: 1.125rem;
      font-weight: 500;
      color: #fff;
      line-height: 1.125rem;
      padding: 0.625rem 3.75rem 0.625rem 3.5rem;
      background: linear-gradient(79deg, #ed7e40 14.000000000000002%, #ea553a 100%);
      border-radius: 1.25rem;
      // min-width: 12.5rem;
      white-space: nowrap;
    }

    .gray {
      background: #ccc !important;
    }
  }

  .upload {
    color: #cecece;
    font-size: 0.75rem;
    line-height: 1.4375rem;
    padding: 1.625rem 0 0 0;
  }
</style>
